<template>
  <footer class="footer">
    <div class="footer-content">
      <!-- 顶部图标区域 -->
      <div class="footer-features">
        <el-row :gutter="0" justify="space-around">
          <el-col :span="6">
            <div class="feature-item">
              <el-icon class="feature-icon"><Van /></el-icon>
              <div class="feature-text">
                <h4>专业搬家</h4>
                <p>十年搬家经验</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="feature-item">
              <el-icon class="feature-icon"><PriceTag /></el-icon>
              <div class="feature-text">
                <h4>价格透明</h4>
                <p>统一收费标准</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="feature-item">
              <el-icon class="feature-icon"><Service /></el-icon>
              <div class="feature-text">
                <h4>优质服务</h4>
                <p>全程专人服务</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="feature-item">
              <el-icon class="feature-icon"><Position /></el-icon>
              <div class="feature-text">
                <h4>安全保障</h4>
                <p>物品全程保险</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 链接区域 -->
      <div class="footer-links">
        <el-row :gutter="0" justify="space-between">
          <el-col :span="4">
            <div class="link-section">
              <h4><el-icon><Document /></el-icon> 平台服务</h4>
              <ul>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 服务条款</a></li>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 加入我们</a></li>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 隐私声明</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="link-section">
              <h4><el-icon><InfoFilled /></el-icon> 关于我们</h4>
              <ul>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 公司简介</a></li>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 联系方式</a></li>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 商务合作</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="link-section">
              <h4><el-icon><QuestionFilled /></el-icon> 帮助中心</h4>
              <ul>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 常见问题</a></li>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 用户指南</a></li>
                <li><a href="#"><el-icon><ArrowRight /></el-icon> 意见反馈</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="contact-section">
              <h4><el-icon><Phone /></el-icon> 联系我们</h4>
              <p><el-icon><PhoneFilled /></el-icon> 电话：15078850230</p>
              <p><el-icon><Message /></el-icon> 邮箱：15078850230@163.com</p>
              <p><el-icon><Location /></el-icon> 地址：广东省东莞市松山湖</p>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="qr-code">
              <el-image src="/src/assets/ewm.jpg" fit="cover" class="qr-image">
                <template #error>
                  <div class="qr-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <p>扫码了解更多</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 底部版权信息 -->
      <div class="footer-bottom">
        <p><el-icon><CopyDocument /></el-icon> © 2024 hs-蚂蚁搬家. All rights reserved.</p>
        <p><el-icon><Connection /></el-icon> 粤ICP备XXXXXXXX号-1</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
import {
  Van,
  PriceTag,
  Service,
  Position,
  Document,
  InfoFilled,
  QuestionFilled,
  ArrowRight,
  Phone,
  PhoneFilled,
  Message,
  Location,
  Picture,
  CopyDocument,
  Connection
} from '@element-plus/icons-vue'
</script>

<style scoped>
.footer {
  background-color: #2c3e50;
  color: #fff;
  padding: 0 0 20px;
  margin-top: 50px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 特色服务区域 */
.footer-features {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 40px 0;
  margin-bottom: 40px;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.feature-icon {
  font-size: 32px;
  color: #409EFF;
  margin-right: 15px;
  flex-shrink: 0;
}

.feature-text h4 {
  margin: 0;
  font-size: 18px;
  white-space: nowrap;
}

.feature-text p {
  margin: 5px 0 0;
  color: #a8b2bc;
  font-size: 14px;
  white-space: nowrap;
}

/* 链接区域 */
.footer-links {
  padding: 0 20px;
  margin-bottom: 40px;
}

.link-section h4,
.contact-section h4 {
  font-size: 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-section ul li {
  margin-bottom: 12px;
}

.link-section ul li a {
  color: #a8b2bc;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.link-section ul li a:hover {
  color: #fff;
}

/* 联系方式区域 */
.contact-section p {
  color: #a8b2bc;
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 二维码区域 */
.qr-code {
  text-align: center;
}

.qr-image {
  width: 120px;
  height: 120px;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.qr-code p {
  color: #a8b2bc;
  font-size: 14px;
}

.qr-placeholder {
  width: 120px;
  height: 120px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 30px;
}

/* 底部版权信息 */
.footer-bottom {
  border-top: 1px solid #3d4d60;
  padding-top: 20px;
  text-align: center;
}

.footer-bottom p {
  color: #a8b2bc;
  font-size: 14px;
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* 图标全局样式 */
.el-icon {
  vertical-align: middle;
}
</style>